<template>
  <div>
    <mt-header title="红院外卖" fixed class="homeColor">
      <h1 slot="left">首页</h1>
      <div slot="right">
        <router-link to="/register" class="link">注册</router-link>&nbsp;
        <router-link to="/login" class="link">登录</router-link>
      </div>
    </mt-header>
    <mt-search  autofocus class="header" show style="margin-top:40px"> 
    <div class="mainServer">
      <div v-for="(item,i) in xhy_server" :key="i" @click="server(`${i}`)">
        <img :src="item.pic_server" alt="" />
        <h3>{{item.title_server}}</h3>
      </div>
    </div>
    <!-- 轮播图 -->
    <mt-swipe :show-indicators="false" :style="{ height: h }">
      <mt-swipe-item v-for="(item,i) in xhy_carousel" :key="i">
        <img :src="item.pic_carousel" alt="" />
      </mt-swipe-item>
    </mt-swipe>
    <div class="main">
      <h1>热门推荐</h1>
      <div class="hot">
        <div v-for="(item,i) in xhy_storehot" :key="i"  @click="store(`${item.name_store}`)">
          <img :src="item.pic_store" alt="" />
          <h2>{{item.name_store}}</h2>
        </div>   
      </div>
      <div class="hotFood">
        <div v-for="(item,i) in xhy_storehots" :key="i"  @click="store(`${item.name_store}`)">
          <img :src="item.pic_store" alt="" class="food-left" />
          <div class="food-right">
            <h2>{{item.name_store}}</h2>
            <div class="item-left">
              <h5>月售:{{item.sale_store}}</h5>
              <span>起送价:￥{{item.minPrice_store}}</span>
              <p>{{item.info_store}}</p>
            </div>
            <div class="item-right">
              <h5>{{item.time_store}}分钟|{{item.range_store}}m</h5>
              <span>{{item.way_store}}</span>
            </div>
          </div>
        </div>  
      </div>
      
    </div>
    <p class="footer">已经到底啦~</p>
    <!-- 底部 -->
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="shouye">
        <img
          :src="
            require(`../assets/img/main_${
              selected == 'shouye' ? '1' : '0'
            }.png`)
          "
          alt=""
          slot="icon"
        />
        首页</mt-tab-item
      >
      <mt-tab-item id="dingdan">
        <img
          :src="
            require(`../assets/img/dingdan_${
              selected == 'dingdan' ? '1' : '0'
            }.png`)
          "
          alt=""
          slot="icon"
        />
        订单</mt-tab-item
      >
      <mt-tab-item id="wode">
        <img
          :src="
            require(`../assets/img/me_${selected == 'wode' ? '1' : '0'}.png`)
          "
          alt=""
          slot="icon"
        />
        我的</mt-tab-item
      >
    </mt-tabbar>
    </mt-search>
  </div>
</template>

<style scoped>
.link {
  color: #fff;
}
.homeColor {
  background: #cd5c5c;
}
.mainServer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 48px;
  border-bottom: 5px solid rgb(192, 185, 185);
  padding: 10px;
}
.mainServer img{
  width: 100%;
  margin: auto;
}
.mint-swipe-item > img {
  width: 100%;
}
.main > h1 {
  color: #cd5c5c;
  text-align: center;
  font-size: 24px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}
.hot img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.hot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  margin: 5px;
}
.hot h2 {
  text-align: center;
  margin: 10px;
}
.hotFood {
  margin-bottom: 50px;
}
.hotFood > div {
  border-bottom: 1px dashed #eee;
  padding-bottom: 10px;
  margin: 5px;
}
.hotFood img {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  margin: 5px;
}
.food-left {
  float: left;
}
.food-right {
  height: 100px;
}
.food-right > h2 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 5px;
}
.food-right span {
  color: #cd5c5c;
  line-height: 30px;
}
.food-right p {
  background-color: #cd5c5c;
  border-radius: 5px;
  line-height: 25px;
  text-align: center;
}
.item-left {
  float: left;
  text-align: left;
}
.item-right {
  text-align: right;
}
.footer{
  margin-bottom: 20px;
  margin-top: -40px;
 
  text-align: center;
}
</style>

<script>
export default {
  data() {
    return {
      selected: "shouye",
      h: "210px", //默认轮播图高度
      xhy_server:[],
      xhy_carousel:[],
      xhy_storehot:[],
      xhy_storehots:[]
    };
  },
  watch: {
    // 底部监听
    selected(newValue, oldValue) {
      if (newValue == "wode") {
        this.$router.push("/wode");
      } else {
        this.$router.push("/dingdan");
      }
    },
  },
  mounted() {
    // 轮播图
    this.mySwipe();
    // 发请求，访问xhy_server
    this.axios.get('/index/index_server').then((result)=>{
      // 将返回结果保存在xhy_server
      this.xhy_server=result.data;
    })
    // 发请求，访问xhy_carousel
    this.axios.get('/index/index_carousel').then((result)=>{
      // 将返回结果保存在xhy_carousel
      this.xhy_carousel=result.data;
    })
    this.axios.get('/index/index_store').then((result)=>{
      // console.log(result.data);
      this.xhy_storehot=result.data.slice(0,3);
      this.xhy_storehots=result.data.slice(3);
    })
  },
  methods: {
    // 轮播图
    mySwipe() {
      let screenW = window.screen.width;
      let picW = 1000;
      let picH = 600;
      let swipeH = Math.floor((picH * screenW) / picW) + "px";
      this.h = swipeH;
    }, 
    server(e){
      if(e==0){
        this.$router.push("/ningmeng")
      }else if(e==1){
        this.$router.push("/qinshi")
      }else{
        this.$router.push("/shitang") 
      }
    },
    store(e){
      let name=e;
      console.log(name);
      this.$router.push(`/store?name_store=${name}`)
    }
  }
};
</script>